<?php
/**
 * XuYuan Project
 *
 * @package	XueYuan 
 * @author	Jiuchi Team
 * @since	Version 1.0.0
 * @filesource
 */
defined('BASEPATH') OR exit('No direct script access allowed');
/**
 * My circle view
 * @author Wayne Yu
 */
?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <?php $this->load->view('common/head');?>
    <link rel="stylesheet" type="text/css" href="/assets/css/layout.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/mycircle.css">
    <link rel="stylesheet" href="/assets/ace/css/bootstrap.css">
    <link rel="stylesheet" href="/assets/ace/css/font-awesome.css">
    <link rel="stylesheet" href="/assets/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/assets/ace/css/bootstrap.css" />
    <link rel="stylesheet" href="/assets/ace/css/font-awesome.css" />

    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="/assets/ace/css/jquery-ui.custom.css" />

    <!-- text fonts <--></-->
    <link rel="stylesheet" href="/assets/ace/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="/assets/ace/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet" />
    <![endif]-->

    <!--[if lte IE 9]>
      <link rel="stylesheet" href="../assets/css/ace-ie.css" />
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- ace settings handler -->
    <script src="/assets/ace/js/ace-extra.js"></script>

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="../assets/js/html5shiv.js"></script>
    <script src="../assets/js/respond.js"></script>
    <![endif]-->
    <style>
        body{
            padding: 0;
        }
    </style>

</head>
<body>
    <!-- 创建圈子弹窗-->
    <div id="box-createTopic">
        <div class="submit-container">
            <div class="submit-content-title">
                <span class="submit-content-creat">发布话题</span>
            </div>
            <div class="submit-content">
                <div class="submit-form">
                    <form action="<?php echo site_url('topic/createPost/'.$cid)?>" class="form-form" method="post">
                        <div class="content-circle-select clear">
                            <div class="topic-create-title">
                                话题名称
                            </div>
                            <div class="circle-name-create">
                                <input type="text" name="title" class="circle-name-create-input" style="width: 360px;">
                            </div>
                        </div>
                        <div class="content-topic-create clear">
                            <div class="topic-create-title">
                                话题内容
                            </div>
                            <div class="edit-frame">
                                <div id="my-editor" class="wysiwyg-editor"></div>
                            </div>
                            <input type="hidden" value="" name="content" id="hid"/>  
                        </div>
                        <div class="submit-finish-part">
                            <button class="right-btn-decoration btn-blue" type="submit" id="makenews">发布</button>
                        </div>
                        <script type="text/javascript">
                            var makenews=document.getElementById("makenews");
                            makenews.onclick=function(){
                                var temp=document.getElementById("my-editor").innerHTML; 
                                document.getElementById("hid").value=temp;
                            }
                        </script> 
                    </form>

                </div>
            </div>
         </div>
    </div>
    
    <script src="/assets/ace/js/bootstrap.js"></script>

    <!-- page specific plugin scripts -->
    <script src="/assets/ace/js/jquery-ui.custom.js"></script>
    <script src="/assets/ace/js/jquery.ui.touch-punch.js"></script>
    <script src="/assets/ace/js/markdown/markdown.js"></script>
    <script src="/assets/ace/js/markdown/bootstrap-markdown.js"></script>
    <script src="/assets/ace/js/jquery.hotkeys.js"></script>
    <script src="/assets/ace/js/bootstrap-wysiwyg.js"></script>
    <script src="/assets/ace/js/bootbox.js"></script>


    <!-- ace scripts -->   
    <script src="/assets/ace/js/ace/elements.scroller.js"></script>
    <script src="/assets/ace/js/ace/elements.colorpicker.js"></script>
    <script src="/assets/ace/js/ace/elements.fileinput.js"></script>
    <script src="/assets/ace/js/ace/elements.typeahead.js"></script>
    <script src="/assets/ace/js/ace/elements.wysiwyg.js"></script>
    <script src="/assets/ace/js/ace/elements.spinner.js"></script>
    <script src="/assets/ace/js/ace/elements.treeview.js"></script>
    <script src="/assets/ace/js/ace/elements.wizard.js"></script>
    <script src="/assets/ace/js/ace/elements.aside.js"></script>
    <script src="/assets/ace/js/ace/ace.js"></script>
    <script src="/assets/ace/js/ace/ace.ajax-content.js"></script>
    <script src="/assets/ace/js/ace/ace.touch-drag.js"></script>
    <script src="/assets/ace/js/ace/ace.sidebar.js"></script>
    <script src="/assets/ace/js/ace/ace.sidebar-scroll-1.js"></script>
    <script src="/assets/ace/js/ace/ace.submenu-hover.js"></script>
    <script src="/assets/ace/js/ace/ace.widget-box.js"></script>
    <script src="/assets/ace/js/ace/ace.settings.js"></script>
    <script src="/assets/ace/js/ace/ace.settings-rtl.js"></script>
    <script src="/assets/ace/js/ace/ace.settings-skin.js"></script>
    <script src="/assets/ace/js/ace/ace.widget-on-reload.js"></script>
    <script src="/assets/ace/js/ace/ace.searchbox-autocomplete.js"></script>
    <script type="text/javascript">
jQuery(function($){
    function showErrorAlert (reason, detail) {
        var msg='';
        if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
        else {
            //console.log("error uploading file", reason, detail);
        }
        $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
         '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
    }

        var uploadFiles = [];
        $("#my-editor").change(function () {
            $.each(this.files, function (index, fileObj) {
                uploadFiles.push(fileObj);
            });
        });
         
        $('#my-editor').ace_wysiwyg({
            toolbar:
                [
                    null,
                    {name:'bold', className:'btn-info'},
                    {name:'italic', className:'btn-info'},
                    null,
                    {name:'insertImage', className:'btn-success'},
                    null,
                    {name:'undo', className:'btn-grey'},
                    {name:'redo', className:'btn-grey'}
                ],
                'wysiwyg': {
                    fileUploadError: showErrorAlert
                }
            }).prev().addClass('wysiwyg-style2');
                  
        // 点击提交后处理: 
        for (var i = 0; i < uploadFiles.length; i++) {
            var fileObj = uploadFiles[i];
            // 判断图片是否存在
            readFileIntoDataUrl(fileObj).done(function (dataUrl) {
                var imgTag = $("#my-editor").find("img[src='" + dataUrl + "']");
                if (imgTag.length > 0) {
                    alert(1);
                    // 图片存在, 上传当前文件.
                    // uploadImage方法为你的上传图片方法.
                    var url = uploadImage(fileObj);
                    imgTag.attr("src", url);
                    var width = imgTag.width();
                    var height = imgTag.height();
                    imgTag.clacImgZoomParam(300,200,width,height);
         
                }
            });
        }
    var readFileIntoDataUrl = function (fileInfo) {
    var loader = $.Deferred(),
        fReader = new FileReader();
    fReader.onload = function (e) {
        loader.resolve(e.target.result);
    };
    fReader.onerror = loader.reject;
    fReader.onprogress = loader.notify;
    fReader.readAsDataURL(fileInfo);
    return loader.promise();
    };
});

    function clacImgZoomParam(maxWidth, maxHeight, width, height) {  
    var param = { width: width, height: height };  
    if (width > maxWidth || height > maxHeight) {  
        var rateWidth = width / maxWidth;  
        var rateHeight = height / maxHeight;  

        if (rateWidth > rateHeight) {  
            param.width = maxWidth;  
            param.height = Math.round(height / rateWidth);  
        } else {  
            param.width = Math.round(width / rateHeight);  
            param.height = maxHeight;  
        }  
    }
}
    </script>
</body>
</html>

